<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="/page/common/common_header.jsp" %>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>排班查询</title>

<!-- fullcalendar  -->
<link href='${baseURL }/js/fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='${baseURL }/js/fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='${baseURL }/js/jquery.min.js'></script>
<script src='${baseURL }/js/fullcalendar/jquery-ui.custom.min.js'></script>
<script src='${baseURL }/js/fullcalendar/fullcalendar.min.js'></script>

<script type="text/javascript" src="${baseURL }/package/js/itcui.min.js"></script>
<script type="text/javascript" src="${baseURL }/js/schedule/scheduleSearch.js?version=2.6"></script>
<link rel="stylesheet" type="text/css" href="${baseURL }/package/css/itcui.min.css" media="all"/>
<script type="text/javascript" src="${baseURL }/js/itcui.js"></script>
<script type="text/javascript" src="${baseURL }/js/public.js"></script>

<!-- toolbar css  -->
<link rel="stylesheet" type="text/css" href="${baseURL }/css/content_table.css" media="all"/>
<link rel="stylesheet" type="text/css" href="${baseURL }/css/itcui.css" media="all"/>
<link rel="stylesheet" type="text/css" href="${baseURL }/css/base.css" media="all"/>
	
<style type="text/css">
	#content {
		width: 98%;
		margin: 8px auto;
	}
.gray_hover
{
	box-shadow:0 1px 3px rgba(0,0,0,.2);
	border-color:#787878;
	background:url("") repeat-x;
}
</style>

<script>

	$(function() {
		var menu = new $.ITCUI_DropDownMenu();
		menu.create_menu(itcui_menu2, "#menu2");

		$("#year").addClass("gray_hover");

		$("#banzu").click(function() {
			$("#banzu").addClass("gray_hover");
			$("#dept").removeClass("gray_hover");
			$("#year").removeClass("gray_hover");
		});
		$("#dept").click(function() {
			$("#banzu").removeClass("gray_hover");
			$("#dept").addClass("gray_hover");
			$("#year").removeClass("gray_hover");
		});
		$("#year").click(function() {
			$("#banzu").removeClass("gray_hover");
			$("#year").addClass("gray_hover");
			$("#dept").removeClass("gray_hover");
		});

		$("#sortRule").ITCUI_ComboBox(null, {
			"onChange" : function(val) {
				$("#calendar").html("");
				groupShow();
			}
		});
		$("#sortRule2").ITCUI_ComboBox(null, {
			"onChange" : function(val) {
				$("#personCalendar").html("");
				personShow();
			}
		});
		
		createZhibie("zhibie","20");
		createZhibie("zhibie2","20");
		createYearSchedule("first");
		createYearSchedule("second");
		//fillIn(startRow,startCol,startMonth,flag)
		fillIn(2,1,1,"first");
		yearShow();
		
		var clientWidth=document.body.clientWidth;
		console.log("动态宽度："+clientWidth);
		
		var widthRight=parseInt(clientWidth*0.8*(6.5)/(1+6.5));
		var widthLeft=parseInt(clientWidth*0.8-widthRight);
		console.log("左边："+widthLeft);
		console.log("右边："+widthRight);
		
		var rightDiv=$("#first_half").width();
		console.log("当前right:"+rightDiv);
		
	});

	
</script>

</head>
<body>
	<div id="content">
		<div class="toolbar" >
			<span class="itcui_btn_base itcui_btn_gray itcui_btn_grp_l"
				style="width: 80px; margin-left: -1px" onclick="yearShow()" id="year">全年视图</span>
			<span class="itcui_btn_base itcui_btn_gray itcui_btn_grp_m"
				style="width: 80px; margin-left: -1px" onclick="personShow()" id="banzu">值别视图</span>
			<span class="itcui_btn_base itcui_btn_gray itcui_btn_grp_r"
				style="width: 80px; margin-left: -1px" onclick="groupShow()" id="dept">岗位视图</span>
			<div id="searchCondition" style="float: right; height: 28px;display: none;">
				<select id="sortRule" style="width: 150px; float: left;" class="itcui_btn_base itcui_btn_gray ">
					<option value="1">船闸排班</option>
					<option value="2">运行值班员排班</option>
					<option value="3">运行值长排班</option>
					<option value="4">经理排班</option>
					<option value="5">车船排班</option>
				</select>
			</div>
			<div id="searchCondition2" style="float: right; height: 28px;">
				<select id="sortRule2" style="width: 150px; float: left;" class="itcui_btn_base itcui_btn_gray ">
					<option value="1">一班</option>
					<option value="2">二班</option>
					<option value="3">三班</option>
					<option value="4">四班</option>
					<option value="5">五班</option>
				</select>
			</div>
			<div id="searchCondition3" style="height: 28px;float: left;margin-left: 338px;">
				<select  style="width: 60px;" class="itcui_btn_base itcui_btn_gray ">
					<option value="1">2014</option>
					<option value="2">2013</option>
					<option value="3">2012</option>
					<option value="4">2011</option>
					<option value="5">2010</option>
				</select>
				<select  style="width: 100px;margin-left: 8px;" class="itcui_btn_base itcui_btn_gray ">
					<option value="1">值长</option>
					<option value="2">机组工程师</option>
					<option value="3">机组操作员</option>
					<option value="4">电器操作员</option>
					<option value="5">燃料集控班长</option>
				</select>
		</div>
			
		</div>

		<div id='personCalendar' style="display:none;"></div>
		<div id='calendar' style="display: none;"></div>
		<div id="yearCalendar">
		<!-- 前六个月日历 -->
		<div id="first_half">
		<div style="min-width: 102px;float: left;">
		<table class="easyui-datagrid" style="clear: both;width: 102px;" id="zhibie">
			<!-- <thead>
				<tr >
					<th  data-options="field:'a',width:20,fixed:true,resizable:false">A<br />值</th>
					<th  data-options="field:'b',width:20,fixed:true,resizable:false">B<br />值</th>
					<th  data-options="field:'c',width:20,fixed:true,resizable:false">C<br />值</th>
					<th  data-options="field:'d',width:20,fixed:true,resizable:false">D<br />值</th>
					<th  data-options="field:'e',width:20,fixed:true,resizable:false">E<br />值</th>
				</tr>
			</thead> -->
		</table>
		</div>
		<div style="min-width:650px;float: left;margin-top: -2px;">
		<table style="font-size:12px;" id="first">
			<thead>
				<tr style="height:38px;background-color: #e9e9e9;">
					<th colspan="4">一月</th>
					<th colspan="4">二月</th>
					<th colspan="4">三月</th>
					<th colspan="4">四月</th>
					<th colspan="4">五月</th>
					<th colspan="4">六月</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
		</div>
		</div>
		<!-- 后六个月日历 -->
		<div id="second_half" style="float: left;">
		<div style="min-width: 102px;float: left;">
		<table class="easyui-datagrid" style="clear: both;width: 102px;" id="zhibie2">
		<!-- 	<thead>
				<tr >
					<th  data-options="field:'a',width:20,fixed:true,resizable:false">A<br />值</th>
					<th  data-options="field:'b',width:20,fixed:true,resizable:false">B<br />值</th>
					<th  data-options="field:'c',width:20,fixed:true,resizable:false">C<br />值</th>
					<th  data-options="field:'d',width:20,fixed:true,resizable:false">D<br />值</th>
					<th  data-options="field:'e',width:20,fixed:true,resizable:false">E<br />值</th>
				</tr>
			</thead> -->
		</table>
		</div>
		<div style="min-width:650px;float: left;margin-top: -2px;">
		<table style="font-size:12px;" id="second">
			<thead>
				<tr style="height:38px;background-color: #e9e9e9;">
					<th colspan="4">七月</th>
					<th colspan="4">八月</th>
					<th colspan="4">九月</th>
					<th colspan="4">十月</th>
					<th colspan="4">十一月</th>
					<th colspan="4">十二月</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
		</div>
		</div>
		</div>
	</div>
</body>
</html>